<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我一下</button>

    <button id="btn" onclick="alert('出现惊喜了吗？')">点我我就执行</button>
    <script>
        document.title = "事件"
        document.documentElement.lang = "zh"
        /* 
            事件（Event）：
                事件就是用户和页面之间发生的交互行为，比如点击按钮，鼠标移动，双击按钮，敲击键盘......
            
            我们可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互。
            绑定响应函数的方式有多种
            第一种
                可以直接在元素的属性中设置。
                onclick         点击
                ondbclick       双击
                onmouseenter    鼠标移入
                <button id="btn" onclick="alert('出现惊喜了吗？')">点我我就执行</button>
            
            第二种
                可以通过为元素的指定属性设置回调函数的形式来绑定事件。（一个事件只能绑定一个响应函数）

                btn.onclick=function(){
                alert("我是你点击的第一个Button")
                }

            第三种 
                可以通过元素addEventListener("事件"，函数)方法来绑定事件。（可以绑定多次）

        */

        const btn = document.querySelector("#btn")

        //为元素的属性设定响应函数（一个事件只能绑定一个响应函数）
        btn.onclick = function () {
            alert("我是你点击的第一个Button")
        }

        btn.addEventListener("mouseenter",()=>{
                btn.style.height="50px";
                btn.style.width="500px";
        })
        btn.addEventListener("mouseenter",()=>{
            btn.style.color="red"
            btn.style.fontSize="40px"
        })

    </script>
</body>

</html>